<template>
  <view class="section panel m-t">
    <view class="home_title">
<!--      <text class="home_title-modify"></text>-->
      <text class="home_title-tit">{{title}}</text>
      <text class="desc">{{desc}}</text>
    </view>
    <view class="info" v-if="info">{{info}}</view>
    <slot></slot>
  </view>
</template>

<script>

    export default {
        props:{
            title:{
                type:String,
                default: ''
            },
            code:{
                type:String,
                default:''
            },
            desc:{
                type:String,
                default:'嗷嗷'
            },
            info:{
                type:String,
                default:''
            }
        },
        data() {
            return {}
        },
        watch: {},
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
  $main-blue: #3b64ff;
  .yticon {
    font-size: 24upx;
    color: #999;
    float: right;
  }
  .home_title {
    padding: 40upx 20upx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &-modify {
      width: 10upx;
      height: 30upx;
      background-color: $main-blue;
      display: inline-block;
    }
    &-right{
      font-size: 30upx;
    }
    &-tit {
      font-size: 30upx;
      color: #333;
      font-weight: 700;
      line-height: 1;
      margin-right: 20upx;
    }
  }
  .desc {
    font-size: 26upx;
    color: #999;
  }
  .info {
    font-size: 26upx;
    color: #999;
    width: 710upx;
    height: 60upx;
    line-height: 60upx;
    background-color: #f4f6f8;
    border-radius: 8upx;
    margin: 0 auto;
    text-indent: 1em;
  }
</style>
